<!--预警类型-->

<template>
  <div class="containerBox wrap">
    <cusCard>
      <div class="searchBox">
        <el-form :model="warningForm" :inline="true">
          <el-form-item label="留样日期">
            <el-date-picker v-model="warningForm.sampleTime" type="daterange" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item label="留样餐段">
            <el-select v-model="warningForm.mealSegmentId" placeholder="请选择留样餐段" @change="searchHandler">
              <el-option v-for="item in mealList" :key="item.id" :label="item.mealSegmentName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="设备ID">
            <el-input v-model="warningForm.deviceId" placeholder="请输入设备ID" @keydown.enter="searchHandler"></el-input>
          </el-form-item>
          <el-form-item label="预警类型">
            <el-select v-model="warningForm.warningType" placeholder="请选择预警类型
            " @change="searchHandler">
              <el-option v-for="item in warningList" :key="item.warnDetailType" :label="item.warnDetailTypeName"
                :value="item.warnDetailType" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>

      </div>
    </cusCard>
    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="exportHandler" :disabled="!pageObj.total">导出</cusButton>
      <cusTable :tableData="warningTableData" :tableColumns="tableColumns" @changeCol="changeCol" @changeRow="changeRow"
        :loading="loading" :height="460" :showSelect="false">

        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="lookDetail(row)">详情
          </cusButton>

        </template>
      </cusTable>

      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>

    <detailDialog ref="detailDiaRef"></detailDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reqWarnType, reqWarningList, exportWarningInfo } from '@/api/business/device'
import { reqMealList } from "@/api/business/dishes";
import { getThisWeekTime } from '@/utils/time';

const router = useRouter();

const formOrigin = () => ({
  sampleTime: getThisWeekTime(),
  deviceId: '',
  warningType: '',
  mealSegmentId: ''
});

const warningForm = ref(formOrigin());
const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const pageObj = ref(pageInit());
const loading = ref(false);

const searchHandler = () => {
  getWarningList()
};

// 重置查询

const resetHandler = () => {
  warningForm.value = formOrigin();
  pageObj.value = pageInit();
  getWarningList();
};
const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getWarningList()
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getWarningList()
};


// 表格列数据
const tableColumns = reactive([
  { label: "设备ID", prop: "machineCode", width: "130", },
  { label: "设备名称", prop: "deviceName", width: "130", },
  { label: "日期", prop: "warnDate", width: "180", sortable: true },
  { label: "餐段", prop: "mealSegmentName", width: "80", },
  { label: "预警类型", prop: "warningDetailTypeName", width: "80", },
  { label: "预警内容", prop: "detailMessage", width: "200", },

  // {
  //   label: "操作",
  //   prop: "operation",
  //   slot: true,
  //   width: "180",
  //   fixed: "right",
  // },
]);

const warningTableData = ref([])
const getWarningList = () => {
  reqWarningList({
    currentPage: pageObj.value.page,
    deviceKey: warningForm.value.deviceId,
    gmtKeepBegin: warningForm.value.sampleTime[0],
    gmtKeepEnd: warningForm.value.sampleTime[1],
    mealSegmentId: warningForm.value.mealSegmentId,
    pageSize: pageObj.value.pageSize,
    warningDetailType: warningForm.value.warningType,
  }).then(res => {
    if (res.code === 1) {
      warningTableData.value = res.data.list
      pageObj.value.total = res.data.total
    }
  })
}

// 预警类型
const warningList = ref([])
const getWarnTypeList = () => {
  reqWarnType().then(res => {
    if (res.code === 1) {
      warningList.value = res.data
    }
  })
}


// 餐段列表
const mealList = ref([]);
const getMealList = () => {
  reqMealList({
    currentPage: 1,
    pageSize: 3000,
  }).then((res) => {
    loading.value = false;
    if (res.code == 1) {
      mealList.value = res.data.list;
    }
  });
};

const exportHandler = () => {
  console.log(777)
  exportWarningInfo(
    {
      deviceKey: warningForm.value.deviceId,
      gmtKeepBegin: warningForm.value.sampleTime[0],
      gmtKeepEnd: warningForm.value.sampleTime[1],
      mealSegmentId: warningForm.value.mealSegmentId,
      warningDetailType: warningForm.value.warningType,
    }
  ).then(res => {
    let blob = new Blob([res]);
    let downloadElement = document.createElement("a");
    let href = window.URL.createObjectURL(blob); //创建下载的链接
    downloadElement.href = href;
    downloadElement.download = "预警信息" + ".xlsx"; //下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成移除元素
    window.URL.revokeObjectURL(href); //释放掉blob对象
  })
}

onMounted(() => {

  getWarnTypeList()
  getMealList()
  getWarningList()
});
</script>

<style lang="scss" scoped>
.radio {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 8px;
}
</style>